import { useMutation, useQuery } from "@tanstack/react-query";
import { Button, Cell, Toast } from "react-vant";
import { doLucky, getRewardLog, userLogin } from "../api";
import { GoRegister } from "../utils";

export default function Page() {
  //查询用户信息
  const { data: userData } = useQuery({
    queryKey: ["get/user"],
    queryFn: () => userLogin(),
  });

  //获取抽奖记录
  const { data: rewardLog } = useQuery({
    queryKey: ["get/log"],
    queryFn: () => getRewardLog(),
  });

  //开始抽奖
  const { data: luckyData, mutateAsync: mutateLucky } = useMutation({
    mutationFn: doLucky,
  });

  return (
    <div
      style={{
        backgroundColor: "white",
        minHeight: "100vh",
      }}
    >
      <section
        style={{
          minHeight: "100vh",
        }}
      >
        <Cell.Group title="小程序能力">
          <Cell title="跳转到注册1" isLink onClick={() => GoRegister()}></Cell>
          <Cell
            title="跳转到注册2"
            isLink
            onClick={() =>
              GoRegister(
                `/pages/userPackage/FY2324_CNY_luckydraw_Register?fromPage=${encodeURIComponent(
                  window.location.href
                )}`
              )
            }
          ></Cell>
          <Cell
            title="跳转到注册3"
            isLink
            onClick={() =>
              GoRegister(
                `/pages/userPackage/FY2324_CNY_calendar_Register?fromPage=${encodeURIComponent(
                  window.location.href
                )}`
              )
            }
          ></Cell>
        </Cell.Group>

        <Cell.Group title="用户信息">
          <Cell>
            <div> {JSON.stringify(userData)}</div>
          </Cell>
          <Cell
            title="设置为未注册"
            isLink
            onClick={() => {
              sessionStorage.setItem("memberid", "");
              Toast("设置成功，自动跳转中");
              setTimeout(() => {
                window.location.replace("/");
              }, 1500);
            }}
          ></Cell>
        </Cell.Group>

        <Cell.Group title="我的抽奖记录">
          <Cell>
            <div> {JSON.stringify(rewardLog)}</div>
          </Cell>
        </Cell.Group>

        <Cell.Group title="抽奖">
          <Cell>
            <Button onClick={() => mutateLucky()}>点击抽奖</Button>
            <div> {JSON.stringify(luckyData)}</div>
          </Cell>
        </Cell.Group>
      </section>
    </div>
  );
}
